<template>
	<view class="address">
		<view class="input">
			<view class="name">姓名：</view>
			<input type="text" class="tips" v-model="name" placeholder="请填写收货人姓名" />
		</view>
		<view class="input">
			<view class="name">电话：</view>
			<input type="text" class="tips" v-model="phone" placeholder="请填写收货人电话" />
		</view>
		<view class="input">
			<view class="name">所在地区：</view>
			<view>
				<view class="tips" @click="addPicker">{{ province }}{{ city }}{{ area }}</view>
			</view>
		</view>
		<view class="input">
			<view class="name">详细地址：</view>
			<input type="text" class="tips" v-model="address" placeholder="例如：中山大道389号" />
		</view>
		<!-- <view class="input">
			<view class="name">门牌号:</view>
			<input type="text" class="tips" v-model="house" placeholder="例如：中山大道389号" />
		</view> -->
		<view v-if="num==1" style="margin-bottom: 120upx;"></view>
		<view class="default" v-if="num!=1">
			<view class="default-text">设置为默认地址</view>
			<view class="li-right">
				<switch class="switch" :checked="defaule" color="#f81149" @change="switchChange" />
			</view>
		</view>
		<view class="save" @click="addAddress" v-if="id > 0||num==1">确认修改</view>
		<view class="save" @click="addAddress" v-else>保存并使用</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onConfirm="onConfirm" :separ="separ"></mpvue-city-picker>
	</view>
</template>

<script>
	import service from '@/store/service.js';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#1577FF',
				separ: '',
				defaule: false,
				id: '',
				name: '',
				phone: '',
				province: '',
				city: '',
				area: '选择您的所在地区',
				address: '',
				house: '',
				show: true,
				default: 0,
				oid: '',
				num: '',
				pid: ''
			};
		},
		components: {
			mpvueCityPicker
		},
		onLoad: function(e) {
			this.num = e.num
			this.pid = e.pid
			if (e.num == 1 || e.num == 2) {
				let address = uni.getStorageSync('myAddress')
				console.log(address);
				this.name = address.username;
				this.phone = address.mobile;
				this.province = address.province;
				this.city = address.city;
				this.area = address.area;
				this.address = address.address;
			}
			console.log(e);
			this.id = e.id;
			this.oid = e.oid;
			if (this.oid) {
				this.default = 1
			}
			console.log(e);
			if (this.id > 0) {
				var title = '编辑收货地址';
				var self = this;
				self.$http
					.post(service.api.address.getAddress, {
						id: e.id,
					})
					.then(function(res) {
						console.log(res, 666);

						var list = res.data;
						self.name = list.name;
						self.phone = list.phone;
						self.province = list.province;
						self.city = list.city;
						self.area = list.area;
						self.address = list.address;
						var type = list.is_default;
						console.log(type, 444);
						if (type == 1) {
							self.defaule = true;
						} else {
							self.defaule = false;
						}
						// self.addressList = list;
					});
			} else {
				var title = '新增收货地址';
			}
			uni.setNavigationBarTitle({
				title: title
			});
		},
		methods: {
			//是否设为默认
			switchChange(e) {
				var type = e.detail.value;
				console.log(e.detail.value);
				this.defaule = type;
				if (type) {
					this.default = 1;
				} else {
					this.default = 0;
				}
				console.log(this.default);
			},
			addAddress() {
				var self = this;
				//手机号码正则验证
				if (!/^1[3-9][0-9]\d{8,11}$/.test(self.phone)) {
					uni.showToast({
						icon: 'none',
						title: '手机号码格式不正确'
					});
					return;
				}
				if (self.num == 1) {
					self.$http
						.post(service.api.address.editreceiving, {
							username: self.name,
							mobile: self.phone,
							province: self.province,
							city: self.city,
							area: self.area,
							address: self.address,
							orderid: self.pid
						})
						.then(function(res) {
							console.log(res);

							uni.showToast({
								icon: 'none',
								title: res.info
							});
							if (res.code == 1) {
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 500)
							}
						})
				} else if (self.num == 2) {
					self.$http
						.post(service.api.address.edit, {
							username: self.name,
							mobile: self.phone,
							province: self.province,
							city: self.city,
							area: self.area,
							address: self.address,
							orderid: self.pid
						})
						.then(function(res) {
							console.log(res);

							uni.showToast({
								icon: 'none',
								title: res.info
							});
							if (res.code == 1) {
								setTimeout(function() {
									uni.redirectTo({
										url: '../points/record'
									})
								}, 500)
							}
						})
				} else {
					self.$http
						.post(service.api.address.modifyAddress, {
							name: self.name,
							phone: self.phone,
							province: self.province,
							city: self.city,
							area: self.area,
							address: self.address,
							is_default: self.default,
							id: self.id,
							order_id: self.oid
						})
						.then(function(res) {
							console.log(res);

							uni.showToast({
								icon: 'none',
								title: res.info
							});
							if (res.code == 1) {
								// setTimeout(function() {
								// 	uni.redirectTo({
								// 		url: './address'
								// 	});
								// }, 2000);
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 500)

							}
							// var list = res.data;
							// self.addressList = list;
							// if(list.logo){
							// self.goodsLogo=
							// }
						});
				}

			},
			// 城市三级联动选择
			addPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			//城市三级联动数据返回
			onConfirm(e) {
				this.province = e.label.province;
				this.city = e.label.city;
				this.area = e.label.area;
			}
		}
	};
</script>

<style scoped>
	page {
		background-color: #fff;
	}

	.input {
		display: flex;
		align-items: center;
		height: 132upx;
		margin: 0 30upx;
		border-bottom: 1px solid #f5f5f5;
	}

	.name {
		width: 192upx;
		font-size: 30upx;
	}

	.tips {
		font-size: 28upx;
		color: #808080;
		flex: 1;
	}

	.default {
		height: 132upx;
		margin: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 125upx;
	}

	.default-text {
		font-size: 30upx;
	}

	.save {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36upx;
		color: #fff;
		/* background: linear-gradient(90deg, rgba(233, 144, 64, 1) 0%, rgba(255, 123, 76, 1) 100%); */
		background: #f81149;
		border-radius: 10upx;
		margin: 0 20upx;
		height: 100upx;
	}

	/deep/ .mpvue-picker__action:last-child {
		color: #f81149 !important;
	}
</style>
